<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <title>Document</title>
</head>

<body>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: middle;
        }

        .banner {
            width: 100vw;
            position: relative;
            overflow: hidden;
        }

        .wrap {
            display: flex;
            width: 500vw;
            flex-wrap: nowrap;
        }

        .wrap a {
            width: 100vw;
        }

        .wrap a img {
            width: 100%;
        }

        .circle {
            position: absolute;
            bottom: 3vw;
            width: 100vw;
            display: flex;
            justify-content: center;
        }

        .circle span {
            width: 25px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
        }

        .circle span.active {
            background: rgb(233, 12, 12);
        }
    </style>

    <div class="banner">
        <div class="wrap">
            <a href="#"><img src="img/000.jpeg" alt=""></a>
            <a href="#"><img src="img/111.jpeg" alt=""></a>
            <a href="#"><img src="img/222.jpeg" alt=""></a>
            <a href="#"><img src="img/333.jpeg" alt=""></a>
            <a href="#"><img src="img/444.jpeg" alt=""></a>
        </div>
        <div class="circle">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>




    <script>
        var banner = document.querySelector('.banner'),
            wrap = document.querySelector('.wrap'),
            circles = document.querySelectorAll('.circle span'),
            imgWidth = banner.offsetWidth;  // 一个图片的宽度


        // 初始化
        wrap.innerHTML += wrap.innerHTML;   // 复制一份
        var len = wrap.children.length;
        wrap.style.width = len * 100 + 'vw';
        wrap.style.transform = 'translateX(0px)';  // 给一个默认的移动值

        var startPointX = 0,    // 手指按下的坐标
            startLeft = 0,         // 手指按下已经走的距离,  整个 wrap 已经移动的距离
            movePointX = 0,        // 手指滑动的距离
            cn = 0,
            ln = 0,
            timer = null;

        // 手指按下
        banner.addEventListener('touchstart', function (ev) {

            // 手指按下的时候, 清除定时器
            clearInterval(timer);

            // 手指按下的时候, 取消动画, 防止尺钝感
            wrap.style.transition = null;

            // 第一张图 , 瞬间挪到第 6 张图 (索引值为 5 )
            if (cn == 0) {
                cn = len / 2;
            }
            //当滑到最后一张图, 瞬间挪到第 索引值为 4 的那一张图
            if (cn == len - 1) {
                cn = len / 2 - 1;
            }

            wrap.style.transform = 'translateX(' + (-cn * imgWidth) + 'px)';

            startPointX = ev.changedTouches[0].pageX;
            startLeft = parseFloat(wrap.style.transform.split("(")[1]);
            console.log("🚀 ~ file: test11.html ~ line 112 ~ startLeft", startLeft)
        });

        // 手指滑动
        banner.addEventListener('touchmove', function (ev) {
            movePointX = ev.changedTouches[0].pageX - startPointX;
            wrap.style.transform = 'translateX(' + (movePointX + startLeft) + 'px)';   // 意思是: 手指滑动的距离 + wrap 已经走过的距离 = 整个 wrap 移动的距离
        });

        // 手指抬起
        banner.addEventListener('touchend', function (ev) {
            movePointX = ev.changedTouches[0].pageX - startPointX;   // 手指抬起时候走了多远
            var backWidth = imgWidth / 2;  // 回弹的范围
            if (Math.abs(movePointX) > backWidth) {
                // 滑动的距离  大于回弹的距离, 显示下一张
                // 如果是正数
                if (movePointX > 0) { cn--; }
                // 如果是负数
                if (movePointX < 0) { cn++; }
                // cn -= movePointX / Math.abs(movePointX);
            }
            wrap.style.transition = '0.3s';
            wrap.style.transform = 'translateX(' + (-cn * imgWidth) + 'px)'  // 别加 分号 (;) , 不然失效

            // 小方块
            // cn   0 1 2 3 4 5 6 7 8 9
            // hn   0 1 2 3 4 0 1 2 3 4
            let hn = cn % (len / 2);  // 取余数
            circles[ln].classList = '';    // 上一个小方块的class 设置为空
            circles[hn].classList = 'active';  // 当前的小方块设置为 active
            ln = hn;   // 当前的小方块 变成 上一个

            // 手指抬起的时候, 继续自动轮播
            timer = setInterval(move, 1200);
        });
        

        // 自动播放
        function move() {
            cn++;
            wrap.style.transition = '0.3s';
            wrap.style.transform = 'translateX(' + (-cn * imgWidth) + 'px)'  // 别加 分号 (;) , 不然失效

            wrap.addEventListener('transitionend', function () {
                // 当 超过/等于 最后一张的时候, 瞬间回到 索引值为 4 的图片
                if (cn >= len - 1) {
                    cn = len / 2 - 1;
                }
                wrap.style.transition = null;   // 去掉动画, 瞬间移动, 防止用户察觉图片移动的过程
                wrap.style.transform = 'translateX(' + (-cn * imgWidth) + 'px)'  // 别加 分号 (;) , 不然失效
            })

            let hn = cn % (len / 2);  // 取余数
            circles[ln].classList = '';    // 上一个小方块的class 设置为空
            circles[hn].classList = 'active';  // 当前的小方块设置为 active
            ln = hn;   // 当前的小方块 变成 上一个
        }

        timer = setInterval(move, 1200);

    </script>



</body>
</html>